<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p><Back></Back>评论</p>
		</header>
		<!--评论区部分-->
		<ul class="remark-box">
			<li v-for="item in remarkArr" :key="item">
				<div class="id">{{item.userName}}:</div>
				<div class="content">{{item.remark}}</div>
				<div>{{item.remarkDate}}</div>
				<!-- 删除按钮，仅显示在当前用户的评论上 -->
				<i class="fa fa-remove" v-if="item.userId === user.userId" @click="deleteRemark(item.remarkId)"></i>
			</li>
		</ul>
		<!-- 发表评论部分 -->
		<div class="search">
			<input type="text" v-model="remarks" placeholder="评论">
			<i class="fa fa-mail-reply" @click="userRemark"></i>
		</div>
		<!--底部部分-->
		<Footer></Footer>
	</div>
</template>
<script>
	import Footer from '../components/Footer.vue';
import Back from '../components/Back.vue';
	export default {
		name: 'Index',
		data() {
			return {
				businessId: this.$route.query.businessId,
				remarks: '',
				remarkArr: [],
				user: {}
			}
		},
		created() {
			this.user = this.$getSessionStorage('user');

			this.getRemarks(); // 获取评论列表
		},
		methods: {
			// 获取评论列表
			getRemarks() {
				let url = `RemarkController/listRemarksByBussinessId/${this.businessId}`;
				this.$axios.get(url).then(response => {
					this.remarkArr = response.data.result;
				}).catch(error => {
					console.error(error); // 输出错误信息
				});
			},
			// 用户发表评论
			userRemark() {
				if (this.remarks == '') {
					alert('评论不能为空！');
					return;
				}
				let url = `RemarkController/saveRemarks/${this.user.userId}/${this.user.userName}/${this.businessId}/${this.remarks}`;
				this.$axios.post(url).then(response => {
					if (response.data.result > 0) {
						alert('评论成功！');
						this.getRemarks(); // 更新评论列表
						this.remarks = '';
					} else {
						alert('评论失败！');
					}
				}).catch(error => {
					console.error(error);
				});
			},
			// 删除评论
			deleteRemark(remarkId) {
				if (!confirm('确认要删除此评论吗？')) {
					return;
				}
                let url = `RemarkController/deleteRemarks/${remarkId}`;
				this.$axios.post(url).then(response => {
					if (response.data.result > 0) {
						alert('删除成功！');
						this.getRemarks(); // 删除成功后重新获取评论列表
					} else {
						alert('删除失败！');
					}
				}).catch(error => {
					console.error(error);
				});
			}
		},
		components: {
			Footer,
			Back
		}
	}
</script>
<style scoped>
	.wrapper {
		width: 100%;
		height: 100zh;
	}

	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		display: flex;
		justify-content: center;
		align-items: center;
		
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
	}

	/****************** 评论区 ******************/
	.wrapper .remark-box {
	    width: 100%;
	    margin-top: 12vw;
	    margin-bottom: 24vw;
	    padding: 0 0vw; 
	}
	
	.wrapper .remark-box li {
    width: 100%;
    background-color: #ffffff; 
    border: 1px solid #e0e0e0; 
    margin-bottom: 3vw; 
    border-radius: 1vw; 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 
    padding: 3vw;
    display: flex;
    flex-direction: column; 
    position: relative; /* 相对定位以放置删除按钮 */
}
	
	.wrapper .remark-box li .id {
    font-weight: bold; 
    color: #333;
    margin-bottom: 1vw; 
}

.wrapper .remark-box li .content {
    color: #555; 
    line-height: 1.6; 
    font-size: 3.8vw; 
}
/* 删除按钮样式 */
.wrapper .remark-box li .fa-remove {
    position: absolute;
    top: 1vw; 
    right: 1vw; 
    color: #ff5c5c; 
    font-size: 5vw; 
    cursor: pointer;
    transition: color 0.3s ease;
	margin-right: 8vw;
}

.wrapper .remark-box li .fa-remove:hover {
    color: #ff0000; 
}
	
	/****************** 评论输入 *****************/
	.wrapper .search {
	    width: 100%;
	    height: 12vw; 
	    background-color: #0097FF;
	    position: fixed;
	    bottom: 14vw;
	    display: flex;
	    align-items: center;
	    padding: 0 4vw; 
	    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1); 
	}
	
	.wrapper .search .search-content {
	    font-size: 3.8vw;
	    color: #fff;
	    margin-right: 2vw; 
	}
	
	.wrapper .search input {
	    flex: 1; 
	    height: 7vw; 
	    border: none;
	    border-radius: 5px; 
	    font-size: 3.8vw; 
	    color: #333;
	    background-color: #f8f8f8;
	    padding: 0 12px;
	    margin-right: 6vw; 
	    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); 
	    transition: background-color 0.3s ease;
	    max-width: 70%; 
	}
	
	.wrapper .search input:focus {
	    outline: none;
	    background-color: #fff;
	    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.1); 
	}
	
	.wrapper .search .fa-mail-reply {
	    font-size: 6vw; 
	    color: #fff; 
	    cursor: pointer; 
	    transition: color 0.3s ease; 
	    margin-right: 2vw; 
	}
	
	.wrapper .search .fa-mail-reply:hover {
	    color: #e0e0e0; 
	}

</style>